<template>
	<view class="content">
		<view class="block">
			<view class="block-title">期望月薪（单选）</view>
			<view class="screen">
				<view @click="salary=0" :class="salary==0?'active':''" class="screen-item">不限</view>
				<view @click="salary=item.id" v-for="(item,index) in salaryList" :key="item.id"
					:class="salary==item.id?'active':''" class="screen-item">
					{{item.data}}元
					{{index == 0 ? '以下' : ''}}
					{{index == salaryList.length - 1 ? '以上' : ''}}
				</view>
			</view>
		</view>
		<!-- <view class="block">
			<view class="block-title">福利待遇（多选）</view>
			<view class="screen">
				<view @click="changeBenefitsActive(index)" v-for="(item,index) in benefitsList" :class="benefitsActive.includes(index)?'active':''" class="screen-item">{{item}}</view>
			</view>
		</view> -->
		<view class="block">
			<view class="block-title">学历（多选）</view>
			<view class="screen">
				<!-- <view @click="changeEducationActive(-1)" :class="education.includes(-1)?'active':''" class="screen-item">不限</view> -->
				<view @click="changeEducationActive(item.id.toString())" v-for="(item,index) in educationList"
					:key="item.id" :class="education.includes(item.id.toString())?'active':''" class="screen-item">
					{{item.data}}
				</view>
			</view>
		</view>
		<view class="block">
			<view class="block-title">工作经验（单选）</view>
			<view class="screen">
				<view @click="experience=0" :class="experience==0?'active':''" :key="item.id" class="screen-item">不限
				</view>
				<view @click="experience=item.id" v-for="(item,index) in experienceList"
					:class="experience==item.id?'active':''" class="screen-item">
					{{item.data}}
					{{index == 0 ? '' : '年'}}
					{{index == experienceList.length - 1 ? '以上' : ''}}
				</view>
			</view>
		</view>
		<view class="block">
			<view class="block-title">行业分类（多选）</view>
			<view class="screen">
				<view @click="changeIndustryActive(0)" :class="industry.includes(0)?'active':''" class="screen-item">
					不限</view>
				<view class="screen-item" @click="navigate('/page_other/job_hunting/job_screen/detail')"
					v-if="jobList.length==0"><text class="add">+</text>
				</view>
				<view v-for="(item,index) in jobList" :key="item.id" class="screen-item"
					:class="jobList.includes(item)?'active':''">
					{{item.jobTitle}}
					<view class="iconfont icon-guanbi" @click="deteteItem(index)"></view>
				</view>
			</view>
		</view>
		<view class="block" v-if="identity==1">
			<view class="block-title">公司规模（单选）</view>
			<view class="screen">
				<view @click="people=0" :class="people==0?'active':''" :key="item.id" class="screen-item">不限
				</view>
				<view @click="people=item.id" v-for="(item,index) in peopleList" :class="people==item.id?'active':''"
					class="screen-item">
					{{item.data}}
				</view>
			</view>
		</view>
		<view class="block" v-if="identity==1">
			<view class="block-title">企业性质（单选）</view>
			<view class="screen">
				<view @click="enterprise=0" :class="enterprise==0?'active':''" :key="item.id" class="screen-item">不限
				</view>
				<view @click="enterprise=item.id" v-for="(item,index) in enterpriseList"
					:class="enterprise==item.id?'active':''" class="screen-item">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="block btn-block">
			<view @click="reset" class="btn reset">重置</view>
			<view class="btn confirm" @click="handle">查看</view>
		</view>
	</view>
</template>

<script>
	import {
		getSalaryList,
		getEducation,
		getExperience,
		getEnterprise
	} from '@/api/config.js'
	import {
		getScale
	} from '@/api/company.js'
	import {
		multipleChoiceChange
	} from '@/util/util.js';
	export default {
		data() {
			return {
				educationList: [],
				experienceList: [],
				salaryList: [],
				education: [],
				industry: [],
				industryList: [],
				experience: 0,
				salary: 0,
				jobList: [],
				peopleList: [],
				people: 0,
				enterprise: 0,
				enterpriseList: []
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			deteteItem(index) {
				var that = this;
				that.jobList.splice(index, 1)
				uni.setStorageSync('jobTypes', that.jobList)
			},
			getSalaryList(resolve, reject) {
				getSalaryList().then((res) => {
					this.salaryList = res ?? [];
					resolve();

				}).catch((res) => {
					reject(res);
				})
			},
			getExperienceList(resolve, reject) {
				getExperience().then((res) => {
					this.experienceList = res ?? [];
					resolve();

				}).catch((res) => {
					reject(res);
				})
			},
			getEducationList(resolve, reject) {
				getEducation().then((res) => {
					this.educationList = res ?? [];
					resolve();

				}).catch((res) => {
					reject(res);
				})
			},
			getPeopleList(resolve, reject) {
				getScale().then((res) => {
					this.peopleList = res ?? [];
					resolve()
				}).catch((res) => {
					reject(res)
				})
			},
			getEnterpriseList(resolve, reject) {
				getEnterprise().then((res) => {
					this.enterpriseList = res ?? [];
					resolve()
				}).catch((res) => {
					reject(res)
				})
			},
			reset() {
				this.salary = 0;
				this.education = [];
				this.experience = 0;
				this.jobList = [];
				this.people = 0;
				this.enterprise = 0;
			},
			changeEducationActive(index) {
				this.education = multipleChoiceChange(this.education, index)
				console.log(this.education)
			},
			changeIndustryActive(index) {
				this.industry = multipleChoiceChange(this.industry, index)
				this.jobList = []
				uni.removeStorageSync('jobTypes');

			},
			handle() {
				let copy = JSON.parse(JSON.stringify(this.jobList));
				console.log(copy)
				if (copy) {
					copy.forEach((item, index) => {
						this.industry.push(item.id)
					})
				}

				let data = {
					salary: this.salary,
					experience: this.experience,
					education: this.education.join(','),
					industry: this.industry.join(','),
					people: this.people,
					enterprise: this.enterprise
				};
				uni.$emit('getRecruiterCondition', data);
				uni.navigateBack();
			},
		},
		onUnload() {
			uni.$off('getJobCategory')
		},
		onLoad(e) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})

			let promise1 = new Promise((resolve, reject) => {
				this.getSalaryList(resolve, reject);
			})
			let promise2 = new Promise((resolve, reject) => {
				this.getExperienceList(resolve, reject);
			})
			let promise3 = new Promise((resolve, reject) => {
				this.getEducationList(resolve, reject);
			})
			let promise4 = new Promise((resolve, reject) => {
				this.getPeopleList(resolve, reject);
			})
			let promise5 = new Promise((resolve, reject) => {
				this.getEnterpriseList(resolve, reject);
			})
			Promise.all([promise1, promise2, promise3, promise4, promise5]).then((res) => {
				uni.hideLoading()
				this.experience = e?.experience ?? 0;
				this.salary = e?.salary ?? 0;
				this.education = e?.education ? e.education.split(',') : [];
				this.people = e?.people ?? 0;
				this.enterprise = e?.enterprise ?? 0;
				this.jobList = uni.getStorageSync('jobTypes') ?? [];
			}).catch((res) => {
				console.log(res);
				uni.hideLoading()
				this.showToast('加载失败，请重试', () => {
					uni.navigateBack()
				})
			})
			let _this = this;
			uni.$on('getJobCategory', function(e) {
				console.log(e)
				_this.jobList = e;
				uni.setStorageSync('jobTypes', _this.jobList)
			})
		},
		computed: {
			identity() {
				return this.$store.getters.identity
			}
		},

	}
</script>

<style lang="scss">
	page {
		background: #fff
	}

	.content {
		width: 100%;
		padding: 30rpx;

		.block {
			margin-bottom: 40rpx;
			width: 100%;

			.block-title {
				height: 70rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.screen {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: left;
				flex-wrap: wrap;

				.screen-item {
					width: calc(100%/3 - 16rpx);
					font-size: 26rpx;
					border-radius: 15rpx;
					height: 70rpx;
					background: #F6F6F6;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 22rpx;
					color: #313131;
					margin-bottom: 20rpx;

					.add {
						font-size: 24px;
					}

					.iconfont {
						font-size: 10px;
						margin-left: 6rpx;
						margin-top: -20rpx;
					}
				}

				.screen-item.active {
					background: #FDECE5;
					color: #FE7526;
				}

				.screen-item:nth-child(3n) {
					margin-right: 0;
				}
			}
		}

		.block:last-child {
			margin-bottom: 0;
		}

		.block.btn-block {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.btn {
				width: calc(50% - 15rpx);
				height: 80rpx;
				background: #F6F6F6;
				color: #313131;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 15rpx;
			}

			.btn.confirm {
				background: #FDECE5;
				color: #FE7526;
				margin-left: 20rpx;
			}
		}
	}
</style>